<template>
  <div class="countdown-container">
    <div class="countdown-display" :class="{ finished: isFinished }">
      <span v-if="days > 0">{{ days }}天</span>
      <span>{{ hours.toString().padStart(2, '0') }}:</span>
      <span>{{ minutes.toString().padStart(2, '0') }}:</span>
      <span>{{ seconds.toString().padStart(2, '0') }}</span>
    </div>

  </div>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue';

const props = defineProps({
  // 剩余秒数
  seconds: {
    type: Number,
    required: true
  },
  // 倒计时结束时的消息
  finishMessage: {
    type: String,
    default: '时间已结束'
  },
  // 是否自动开始
  autoStart: {
    type: Boolean,
    default: true
  },
  // 倒计时结束后是否自动重置
  autoReset: {
    type: Boolean,
    default: false
  },
  // 重置时的默认秒数
  resetSeconds: {
    type: Number,
    default: 0
  }
});

const emit = defineEmits({
  finish: () => true,
  'update:seconds': (value) => typeof value === 'number'
});

// 状态管理
const remainingSeconds = ref(props.seconds);
const isFinished = ref(false);
const timer = ref(null);

// 计算属性
const days = computed(() => Math.floor(remainingSeconds.value / (24 * 60 * 60)));
const hours = computed(() => Math.floor((remainingSeconds.value % (24 * 60 * 60)) / (60 * 60)));
const minutes = computed(() => Math.floor((remainingSeconds.value % (60 * 60)) / 60));
const seconds = computed(() => remainingSeconds.value % 60);

// 开始倒计时
const startCountdown = () => {
  if (isFinished.value && props.autoReset) {
    resetCountdown();
  }

  if (remainingSeconds.value <= 0) {
    isFinished.value = true;
    emit('finish');
    return;
  }

  // 清除之前的计时器
  if (timer.value) {
    clearInterval(timer.value);
  }

  // 每秒更新一次
  timer.value = setInterval(() => {
    if (remainingSeconds.value > 0) {
      remainingSeconds.value--;
      emit('update:seconds', remainingSeconds.value);

      if (remainingSeconds.value === 0) {
        clearInterval(timer.value);
        timer.value = null;
        isFinished.value = true;
        emit('finish');

        if (props.autoReset) {
          setTimeout(() => {
            resetCountdown();
            startCountdown();
          }, 1000);
        }
      }
    }
  }, 1000);
};

// 重置倒计时
const resetCountdown = () => {
  if (timer.value) {
    clearInterval(timer.value);
    timer.value = null;
  }

  remainingSeconds.value = props.resetSeconds > 0 ? props.resetSeconds : props.seconds;
  isFinished.value = false;
};

// 监听props.seconds变化
watch(() => props.seconds, (newVal) => {
  if (newVal !== remainingSeconds.value) {
    resetCountdown();

    if (props.autoStart) {
      startCountdown();
    }
  }
});

// 生命周期钩子
onMounted(() => {
  if (props.autoStart) {
    startCountdown();
  }
});

onBeforeUnmount(() => {
  if (timer.value) {
    clearInterval(timer.value);
    timer.value = null;
  }
});
</script>

<style scoped>
.countdown-container {
  display: inline-block;

  font-family: 'Arial', sans-serif;
}

.countdown-display {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  letter-spacing: 1px;
}

.countdown-display.finished {
  color: #ff4d4f;
}

.countdown-message {
  margin-top: 8px;
  font-size: 16px;
  color: #ff4d4f;
  font-weight: bold;
}
</style>